<template>
  <div class="report">
    <div class="box">
      <div class="box-left">
        <p class="txt">正确率</p>
        <van-circle v-model="currentRate" :rate="accuracy" :color="gradientColor" layer-color="#f1f1f1" :stroke-width="60" :speed="100" :text="text" />
      </div>
      <div class="box-right">
        <p class="txt">训练完成总量</p>
        <div class="detail">{{total}}<span>道</span></div>
        <p class="txt" style="text-align:left;margin-top:10px">训练数量</p>
        <div class="detail">{{number}}<span>道</span></div>
      </div>
    </div>

    <div class="bottom">
      <router-link :to="brush" class="link-a"><slot name="keep"></slot></router-link>
      <router-link :to="analysis" class="link-a"><slot name="all"></slot></router-link>
    </div>
  </div>
</template>

<script>
import { Circle } from 'vant';

export default {
  name: 'report',
  props:{
    brush:{ type:String, default:'' },
    analysis:{ type:String, default:'' },
    accuracy:{ type:String, default:'' },
    total:{ type:String, default:'' },
    number:{ type:String, default:'' },
  },
  components: {
    [Circle.name]: Circle
  },
  data () {
    return {
      currentRate: 0,
      gradientColor: '#ff8333',
    }
  },
  created () {
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
  methods: {},
  mounted () {
  }
}
</script>

<style lang="less" scoped>
.box{
  margin: 80px auto;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.txt{
  font-size: 16px;
  color: #323232;
  text-align: center;
  margin-bottom: 12px;
}
/deep/.van-circle__text {font-size: 16px;}
.detail{
  font-size: 32px;
  color: #ff6400;
  span{
    color: #9d9d9d;
    font-size: 16px;
    margin-left: 5px;
    display: inline-block;
  }
}
.bottom{
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .link-a{
    width: 100px;
    display: block;
    text-align: center;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background: #ff8333;
    font-size: 14px;
    color: #fff;
  }
}
</style>
